<template>
  <div class="login-box">
    <!-- 头部跳转部分 -->
    <div class="login-header">
      <van-icon @click="toHome" name="wap-home-o" size="22" />
      <span class="header-title">网易严选</span>
      <div class="header-right">
        <van-icon name="search" size="22" />
        <van-icon @click="toCart" name="shopping-cart-o" size="22" />
      </div>
    </div>
    <!-- 登录注册按钮部分 -->
    <div class="login-center">
      <img
        class="cartImg"
        src="//yanxuan.nosdn.127.net/static-union/164793255107785e.png"
      />
      <van-button
        @click="tologin"
        type="danger"
        icon="phone-o"
        size="large"
        class="button"
        block
        >手机号快捷登录</van-button
      >
      <van-button
        @click="toregister"
        plain
        type="primary"
        icon="envelop-o"
        size="large"
        class="button"
        block
        >注册网易严选账号</van-button
      >
    </div>
    <!-- 点击登录出现的提交框 -->
    <div class="modal" v-if="ifShowModalLogin">
      <div class="modal-bg" @click="ifShowModalLogin = false"></div>
      <div class="modal-content">
        <van-form @submit="onSubmit">
          <van-field
            v-model="phone"
            name="手机号"
            label="手机号"
            placeholder="手机号"
            :rules="[
              {
                pattern:
                  /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
                message: '请填写11位手机号码',
              },
            ]"
          />
          <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[
              { pattern: /^.{6,12}$/, message: '请填写6到12位正确密码' },
            ]"
          />
          <div style="margin: 16px">
            <van-button
              round
              block
              type="danger"
              native-type="submit"
              @click="handleLogin"
              >登录</van-button
            >
          </div>
        </van-form>
      </div>
    </div>
    <!-- 点击注册出现的提交框 -->
    <div class="modal" v-if="ifShowModalRegister">
      <div class="modal-bg" @click="ifShowModalRegister = false"></div>
      <div class="modal-content">
        <van-form @submit="onSubmitRegister">
          <van-field
            v-model="phone"
            name="手机号"
            label="手机号"
            placeholder="手机号"
            :rules="[
              {
                pattern:
                  /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
                message: '请填写11位手机号码',
              },
            ]"
          />
          <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[
              { pattern: /^.{6,12}$/, message: '请填写6到12位正确密码' },
            ]"
          />
          <van-field
            v-model="code"
            center
            clearable
            label="短信验证码"
            placeholder="请输入验证码"
            :rules="[{ required: true, message: '请填写验证码' }]"
          >
            <template #button>
              <van-button
                size="mini"
                type="primary"
                style="border-radius: 10%"
                @click="getCode"
                >发送验证码</van-button
              >
            </template>
          </van-field>
          <div style="margin: 16px">
            <van-button
              round
              block
              type="danger"
              native-type="submit"
              @click="handleRegister"
              >注册并登录</van-button
            >
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script>
import { reqLogin, reqSendCode, reqRegister } from "@/api";
import { saveToken } from "@/utils/auth";
export default {
  name: "",
  data() {
    return {
      // 默认不显示登录框
      ifShowModalLogin: false,
      // 默认不显示注册框
      ifShowModalRegister: false,
      phone: "", //手机号
      password: "", //密码
      code: "", //验证码
    };
  },
  methods: {
    // 跳转到首页
    toHome() {
      this.$router.push("/home");
    },
    // 跳转到购物车
    toCart() {
      this.$router.push("/cart");
    },
    // 将登陆框显示出来
    tologin() {
      this.ifShowModalLogin = true;
    },
    // 将注册框显示出来
    toregister() {
      this.ifShowModalRegister = true;
    },
    // 点击登录按钮后
    onSubmit(values) {
      // console.log("submit", values);
      console.log("验证成功");
    },
    // 点击注册按钮后
    onSubmitRegister(values) {
      // console.log("submit", values);
      console.log("验证成功");
    },
    // 登录后
    async handleLogin() {
      // 获取手机号、密码
      const { phone, password } = this;
      // 发请求登录
      let result = await reqLogin({ phone, password });
      // 判断业务逻辑是否成功
      if (result.code === 200) {
        //token存入本地
        saveToken(result.data.token);
        // 若登录成功，则提示
        this.$notify({ type: "success", message: "登录成功" });
        // 获取旧路径（什么是旧路径，就是登录前原本要看的路由）
        const { oldpath } = this.$route.query;
        if (oldpath) {
          // 跳转主页
          this.$router.push(oldpath);
        } else {
          this.$router.push("/home");
        }
      } else {
        this.$notify({ type: "danger", message: "登录失败，请检查账号密码" });
      }
    },
    // 注册后
    async handleRegister() {
      // 获取用户输入
      const { phone, code, password } = this;
      // 请求注册(注意此处传递的参数是一个对象)
      let result = await reqRegister({ phone, code, password });
      // 判断业务逻辑是否成功
      if (result.code === 200) {
        // 若业务逻辑成功，提示一下
        this.$notify({ type: "success", message: "注册成功！" });
        // 跳转到登录
        this.handleLogin()
      } else {
        // 若业务逻辑失败，提示原因
        this.$notify({ type: "success", message: result.message });
      }
    },
    // 获取验证码的回调
    async getCode() {
      // 请求服务器获取验证码
      let result = await reqSendCode(this.phone);
      // 判断业务逻辑是否成功
      if (result.code === 200) {
        // 若成功，提示一下
        this.$notify({ type: "success", message: "验证码获取成功！" });
        // 直接把验证码填好
        this.code = result.data;
      } else {
        this.$notify({ type: "danger", message: result.message });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.login-box {
  height: 100%;
  width: 100%;
  .login-header {
    padding: 0 8px 0 12px;
    display: flex;
    background-color: white;
    align-items: center;
    align-content: flex-start;
    justify-content: space-between;
    height: 44px;
    border-bottom: 1px solid #f9f9f9;
    // &.van-icon{
    // 	margin-right: 50px;
    // }
    .header-title {
      height: 27px;
      line-height: 27px;
      font-size: 18px;
      font-weight: bolder;
      margin-left: 45px;
    }
    .header-right {
      .van-icon {
        margin-right: 10px;
      }
    }
  }
  .login-center {
    .cartImg {
      display: block;
      width: 134px;
      height: 45px;
      margin: 80px auto;
    }
  }
  .button {
    width: 335px;
    height: 47px;
    margin: 15px auto;
  }
  .modal {
    width: 100%;
    height: 100%;
    position: fixed; //position: fixed让height:100%起作用
    left: 0;
    top: 0;
    .modal-bg {
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
    }
    .modal-content {
      width: 90%;
      box-sizing: border-box;
      // height: 200px;
      border-radius: 20px;
      background-color: #fff;
      // padding: 20px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 100;
      /deep/ .van-form {
        padding: 20px;
      }
    }
  }
}
</style>